<template>
    <!-- block1 -->
    <div class="block1">
        <div class="block1-container max-width">
            <div class="block1-text">
                <div>对开发者来说功能强大。</div>
                <div>对每个人来说都很快。</div>
            </div>
            <div class="block1-button-container">
                <div class="block1-button-left">动手开发</div>
                <div class="block1-button-right">阅读文档</div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.block1 {
    --at-apply: h-[300px] mt-[90px] flex flex-col justify-center items-center;
}
.block1-container {
    --at-apply: flex flex-col justify-center items-center gap-[45px];
}
.block1-text {
    --at-apply: flex flex-col justify-center items-center text-(70.5px #fff)
    leading-[75px] font-bold max-lg:text-[34px];
}
.block1-button-container {
    --at-apply: flex items-center gap-[10px] text-[#fff];
}
.block1-button-left {
    --at-apply: p-[15px_20px] rounded-[25px] bg-[linear-gradient(90deg,#c766ef,#7928d2_51.04%,#2b0c52)]
    cursor-pointer hover:(bg-[linear-gradient(0,#fff,#fff_100%,#fff)] text-[#000]);
}
.block1-button-right {
    --at-apply: p-[15px_20px] rounded-[25px] bg-[rgba(0,0,0,0.5)] border-(1px solid #fff) cursor-pointer
    hover:(bg-[#fff] text-[#000]);
}
</style>
